<template>
    <el-row :gutter="24">
        <el-col :span="8" class="col1">
            <el-avatar> teacher </el-avatar>
            <changeMessage />
        </el-col>
        <el-col :span="6">
            <h1>我的课程</h1>
            <el-scrollbar height="400px">
                <!-- <div class="item" v-for="item in 20" :key="item">
                    <p>1</p>
                    <p><el-button>修改</el-button><el-button type="danger">删除</el-button></p>
                </div> -->
                <el-table :data="teacherCourse" style="width: 100%">
                    <el-table-column prop="c_name" label="name" width="180" />
                    <el-table-column label="Operations">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                            <el-button size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                        </template>
                    </el-table-column>

                </el-table>

            </el-scrollbar>
        </el-col>
        <el-col :span="10">
            <h1>我的学生</h1>
            <el-scrollbar height="400px">
                <!-- <div class="item" v-for="item in teacherStudent" :key="item.s_id">
                    <p>{{item.s_name}}</p>
                    <p>{{item.s_gender}}</p>
                    <p>{{item.s_age}}</p>
                    <p>{{item.s_id}}</p>
                    <p><el-button type="success">查看学生详细信息</el-button></p>
                </div> -->
                <el-table :data="teacherStudent" style="width: 100%">
                    <el-table-column prop="s_name" label="name" width="180" />
                    <el-table-column prop="s_age" label="age" width="180" />
                    <el-table-column prop="s_gender" label="gender" />
                    <el-table-column label="Operations">
                        <template #default="scope">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                            <el-button size="small" type="danger"
                                @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-scrollbar>
        </el-col>
    </el-row>
</template>

<script setup>
import { getTeacherCourse } from '../API/ApiMethod'
import changeMessage from './changeMessage.vue';
import { useRouter } from 'vue-router'
import { ElRow, ElAvatar, ElMessage, ElInput, ElScrollbar, ElButton, ElTable } from 'element-plus';
import { getTeacherCourseById, getTeacherStudentById } from '../API/ApiMethod'
import { reactive } from 'vue';
components: {
    ElRow,
        ElAvatar,
        changeMessage,
        ElScrollbar,
        ElButton,
        ElTable
}
let teacherStudent = reactive([])
let teacherCourse = reactive([])
const router = useRouter()
let type = sessionStorage.getItem('type')
let token = sessionStorage.getItem('token')
getTeacherCourseById().then(res => {
    if (res.code == 10000) {
        res.data.forEach(item=>{
            teacherCourse.push(item)
        })
    } else {
        ElMessage({
            code: 'error',
            message: '查询失败'
        })
    }
})
getTeacherStudentById().then(res => {
    if (res.code == 10000) {
        res.data.forEach(item=>{
            teacherStudent.push(item)
        })
    } else {
        ElMessage({
            code: 'error',
            message: '查询失败'
        })
    }
})

function handleDelete(){

}

function handleEdit(){

}
</script>

<style scoped>
.col1 {
    margin: 0 auto;
}

.item {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.item div {}
</style>